<template>
    <div id="todoHeader">
        <div class="user">
            <nav>
                <RouterLink to="/login"><img :src="initialImg"/></RouterLink>
            </nav>
        </div>
        <a href="https://gitee.com/snowy-mountains-can-be-seen/vue-todo.git">https://gitee.com/snowy-mountains-can-be-seen/vue-todo.git</a>
        <p class="mainMyDay">待办事项</p>
        <p class="date">{{time}},{{dayOfweek}}</p>
    </div>
</template>
<style scoped>
    .user{
        float: right;
        width: 40px;
        height: 40px;
    }
    .user img{
        border-radius: 50%;
        width: 100%;
        height: 100%;
    }
    a{
        color: white;
    }
    #todoHeader{
        padding-left:50px;
        padding-top: 30px;
        width: 90%;
        height: 15%;
    }
    p{
        color: white;
    }
    .mainMyDay{
        font-size: 26px;
        font-weight: bold;
    }
    .date{
        margin-top: -20px;
    }
</style>

<script setup>
import { ref,onMounted } from 'vue'
import useUserInfoStore from "@/stores/user"; //引入仓库
import { storeToRefs } from "pinia"; //引入pinia转换
const userInfoStore = useUserInfoStore();
const initialImg = ref('https://vfiles.gtimg.cn/vupload/202005/07_common_avatar.png')
const { username, img } = storeToRefs(userInfoStore); 
onMounted(() => {
    if(username.value!=null && username.value!=''){
        initialImg.value = img.value
    }
})

const date = new Date();
const weekdays = ['星期一','星期二','星期三','星期四','星期五','星期六','星期天']
const dayOfweek = weekdays[date.getDay()]

const yy = new Date().getFullYear()
const mm = new Date().getMonth() + 1
const dd = new Date().getDate()
const time = yy + '/' + mm + '/' + dd
</script>